import React from 'react';
import $ from 'jquery';
import { changePage,API_URL,_maskRender } from '../../store/actions'
import { Button, Form, Radio, Input, Row, Col, message, Upload, Icon, Tabs } from 'antd';
import { connect } from 'react-redux'
const FormItem = Form.Item;
class _FormSystemSetting extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            portrait: ''
        }
        this.normFile = this.normFile.bind(this);
        this.handleChange = this.handleChange.bind(this)
    }
    static contextTypes = {
        router:React.PropTypes.object
    };
    normFile(e){
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    }
    handleChange(info){
        //if (info.file.status !== 'uploading') {}
        if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功。`);
            this.props.dispatch(fetchPortrait(this.props.user.user.account_id))
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败。`);
        }
    }
    render(){
        const { getFieldProps } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 }
        };
        const systemName = getFieldProps('name', {
            rules: [
                { required: true, message: '系统名称不能为空'}
            ]
        });
        const systemServerAddr = getFieldProps('serverAddr', {
            rules: [
                { required: true, message: '服务器地址不能为空'}
            ]
        });
        const systemServerPort = getFieldProps('serverPort', {
            rules: [
                { required: true, message: '服务器端口号不能为空'}
            ]
        });
        const systemPacsAddr = getFieldProps('pacsAddr', {
            rules: [
                { required: true, message: '服务器地址不能为空'}
            ]
        });
        const systemPacsInterval = getFieldProps('pacsSync', {
            rules: [
                { required: true, message: '同步时间不能为空'}
            ]
        });
        const systemPacsSync = getFieldProps('pacsInterval', {
            rules: [
                { required: true, message: '同步时间间隔不能为空'}
            ]
        });
        const systemLogo = getFieldProps('logo', {
            valuePropName: 'logo',
            normalize: this.normFile,
            onChange: this.handleChange,
            rules: [
                { required: true,
                    message: '必须上传有效LOGO' }
            ]
        });
        return ( <Form horizontal form={this.props.form}>
              <FormItem
                {...formItemLayout}
                label="系统名称"
              >
                  <Input {...systemName} />
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="系统LOGO"
              >
                  <Upload
                    name="logo"
                    showUploadList={false}
                    action= {`${API_URL}`}
                    {...systemLogo}
                  >
                      <div style={{
                                width: '100px',
                                overflow: 'hidden',
                                backgroundColor: '#ddd'
                            }}><img style={{
                                display: 'block',
                                width: '100%'
                            }} src={this.state.portrait} /></div>
                      <Button type="ghost">
                          <Icon type="upload" /> 选择并上传LOGO图片
                      </Button>
                  </Upload>
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="服务器地址"
              >
                  <Input {...systemServerAddr} />
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="服务器端口"
              >
                  <Input {...systemServerPort} />
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="PACS服务器地址"
              >
                  <Input {...systemPacsAddr} />
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="PACS同步时间"
              >
                  <Input {...systemPacsSync} />
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="PACS同步时间间隔"
              >
                  <Input {...systemPacsInterval} />
              </FormItem>
              <FormItem wrapperCol={{ span: 16, offset: 6 }}>
                  <Button type="primary" onClick={this.handleSubmit}>保存</Button>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <Button type="light" onClick={function(){
                                    this.context.router.goBack(-1)
                                }.bind(this)}>取消</Button>
                  </FormItem>
          </Form>
        )
    }
}

const FormSystemSetting = Form.create()(_FormSystemSetting);
class SystemSetting extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        _maskRender();
    }
    render(){
        return (
          <div>
              <FormSystemSetting user={this.props.user} />
              <div id="_mask"></div>
          </div>

        )
    }
}
export default SystemSetting = connect((state)=>{
    const {user} = state.rootReducer;
    return {user}
})(SystemSetting)